<template>
  <el-form class="form-wrap" :label-width="labelWidth">
    <div v-for="item in formItems" :key="getFormItemProp(item)" class="form-row-wrap">
      <el-form-item :style="`width:${formItemWidth}`">
        <el-row type="flex" justify="end" slot="label" :style="`width: ${labelWidth}`">
          <div v-if="hasChangeVal(item)">
            <el-tag type="warning">有修改</el-tag>
            <el-divider direction="vertical" />
          </div>
          <div class="form-item-label">{{ `${item.label}：` }}</div>
        </el-row>
        <template v-if="item.type === 'textarea'">
          <el-input
            v-model="dataSource[item.prop]"
            type="textarea"
            show-word-limit
            :maxlength="item.maxlength || 100"
            :rows="item.rows || 2"
            :placeholder="`请输入${item.label}`"
          />
        </template>
        <template v-else-if="item.type === 'radio'">
          <el-radio-group v-model="dataSource[item.prop]" disabled>
            <el-radio
              v-for="opt in item.options"
              :key="opt.value"
              :label="opt.value"
            >{{ opt.label }}
            </el-radio>
          </el-radio-group>
        </template>
        <template v-else-if="item.type === 'image'">
          <template v-if="hasChangeVal(item)">
            <el-row type="flex">
              <div v-if="getOriginalVal(item)" class="original-img">
                <el-image
                  class="image-wrap"
                  :src="getOriginalVal(item)"
                  :preview-src-list="[getOriginalVal(item), getPresentVal(item)]"
                />
                <p>原图</p>
              </div>
              <div v-if="getPresentVal(item)" class="present-img">
                <el-image
                  class="image-wrap"
                  :src="getPresentVal(item)"
                  :preview-src-list="[getOriginalVal(item), getPresentVal(item)]"
                />
                <p>现图</p>
              </div>
            </el-row>
          </template>
          <template v-else>
            <el-image
              v-if="getPresentVal(item)"
              class="image-wrap"
              :src="getPresentVal(item)"
              :preview-src-list="[getPresentVal(item)]"
            />
          </template>
        </template>
        <template v-else-if="item.slotName">
          <slot :name="item.slotName" :presentVal="getPresentVal(item)" :originalVal="getOriginalVal(item)">
            <PopoverList
              :hasChangeVal="hasChangeVal(item)"
              :popoverList="{ present: getPresentVal(item)[1] , original: getOriginalVal(item)[1] }"
              :content="{ present: getPresentVal(item)[0], original: getOriginalVal(item)[0] }"
            />
          </slot>
        </template>
        <template v-else>
          <template v-if="hasChangeVal(item)">
            <el-row type="flex" class="edit-tag-wrap">
              <TagTooltip
                isTag
                class="show-tag"
                :style="`maxWidth: ${tagMaxWidth}`"
                :textContent="getOriginalVal(item)"
              >
                <template slot="label-tag">原值：</template>
              </TagTooltip>
              <TagTooltip
                isTag
                class="show-tag"
                :style="`maxWidth: ${tagMaxWidth}`"
                :textContent="getPresentVal(item)"
              >
                <span slot="label-tag">现值：</span>
              </TagTooltip>
            </el-row>
          </template>
          <template v-else>
            <TagTooltip class="show-content" :textContent="getPresentVal(item)" />
          </template>
        </template>
      </el-form-item>
    </div>
  </el-form>
</template>
<script>
import ElImage from 'element-ui/packages/image';
import TagTooltip from './TagTooltip';
import PopoverList from './PopoverList';
import { getEchoByOptions } from '@/utils/getUtils';
export default {
  components: { ElImage, TagTooltip, PopoverList },
  props: {
    formItems: {
      type: Array,
      default: () => []
    },
    formData: {
      type: Object,
      default: () => ({})
    },
    labelWidth: {
      type: String,
      default: '200px'
    },
    // tag展示文本的宽度
    tagMaxWidth: {
      type: String,
      default: '200px'
    },
    // form-item的宽度
    formItemWidth: {
      type: String,
      default: '60%'
    }
  },
  data () {
    return {
      dataSource: {},
    }
  },
watch: {
    formData (val) {
      this.dataSource = val
    }
  },
  methods: {
    // 值是否有变更历史
    hasChangeVal (item) {
      if (!this.dataSource?.diffMap) return false
      const hasChanged = !!this.dataSource.diffMap[item.prop]
      return hasChanged
    },
    // 获取图片url
    getImgUrl (src) {
      if (!src) return null
      const hostReg = /^(http|https):\/\//
      if (hostReg.test(src)) return src
      return `${this.IMAGEURL}${src}?${this.XOSSPROCE}`
    },
    // 获取原值
    getOriginalVal (item) {
      const diffMap = this.dataSource?.diffMap ?? {}
      if (Array.isArray(item.prop)) return this.getPopoverOriginalVal(item, diffMap)
      const { oldValue } = diffMap[item.prop] ?? {}
      return this.getActualShowVal(item, oldValue)
    },
    // 获取现值
    getPresentVal (item) {
      if (Array.isArray(item.prop)) return this.getPopoverPresentVal(item)
      const newValue = this.dataSource[item.prop]
      return this.getActualShowVal(item, newValue)
    },
    getPopoverOriginalVal (item, diffMap) {
      const [contentProp, listProp] = item.prop
      const { oldValue } = diffMap[contentProp] ?? {}
      const contentVal = this.getActualShowVal(item, oldValue)
      const listVal = diffMap[listProp]
      return [contentVal, listVal]
    },
    getPopoverPresentVal (item) {
      const [contentProp, listProp] = item.prop
      const contentVal = this.getActualShowVal(item, this.dataSource[contentProp])
      const listVal = this.dataSource[listProp]
      return [contentVal, listVal]
    },
    // 获取实际展示值
    getActualShowVal (item, val) {
      if (item.type === 'image') return this.getImgUrl(val)
      let showStr = val
      if (item.options && Array.isArray(val)) {
        showStr = item.options
          .filter(item => val.includes(item.value))
          .map(item => item.label)
          .join(',')
      }
      if (item.options && !Array.isArray(val)) {
        showStr = getEchoByOptions(val, item.options)
      }
      return (item?.prefix ?? '') + (showStr ?? '') + (item?.suffix ?? '')
    },
    getFormItemProp (item) {
      if (Array.isArray(item.prop)) return item.prop[0]
      return item.prop
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .el-form-item {
  margin-bottom: 10px;
}
.edit-tag-wrap {
  :nth-child(2) {
    margin-left: 10px;
  }
}
.hidden {
  visibility: hidden;
}
.form-item-wrap {
  width: 60%;
}
.form-row-wrap {
  display: flex;
}
.form-item-label {
  margin-right: 5px;
}
.original-img, .present-img {
  p {
    text-align: center;
    color: #85888e;
    font-size: 13px;
  }
}
.present-img {
  margin-left: 20px;
}
.show-tag {
  margin-top: 4px;
}
.show-content {
  max-width: 100%;
}
.show-tag, .show-content {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.image-wrap {
  width: 120px;
  height: 120px;
  border: 0.5px solid #eee;
}
</style>
